<template>
    <div class="jianzhan-content">
        <Crumb :name="$t('pointCode.PointCode')"></Crumb>
        <div class="content">
            <el-button type="primary"
                       size="small"
                       @click="dialogVisible = true">{{$t('pointCode.add')}}
            </el-button>
            <el-input v-model="key"
                      :placeholder="$t('pointCode.searchByDescription')"
                      size="small"
                      style="margin-left: 20px;width: 250px;"></el-input>
            <el-input v-model="key1"
                      :placeholder="$t('pointCode.searchByPointCode')"
                      size="small"
                      style="margin-left: 20px;width: 250px;"></el-input>
            <div class="table-wrapper">
                <el-table
                        :data="pointList
                        .filter(item=>item.serviceItem.toLowerCase()
                            .includes(key.toLowerCase()))
                        .filter(item=>item.pointCode.toLowerCase()
                            .includes(key1.toLowerCase()))
                            .slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        style="width: 100%">
                    <el-table-column
                            prop="serviceCategory"
                            :label="$t('pointCode.searchByPointCode')"
                            :filters="serviceCategoryFilters"
                            :filter-method="handleFilter"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="serviceItem"
                            :label="$t('pointCode.description')"
                            :filters="serviceItemFilters"
                            :filter-method="handleFilter"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="hours"
                            :label="$t('pointCode.hours')">
                    </el-table-column>
                    <el-table-column
                            prop="pointCode"
                            :label="$t('pointCode.pointCode')">
                    </el-table-column>
                    <el-table-column
                            prop="serviceUnit"
                            :filters="serviceUnitFilters"
                            :filter-method="handleFilter"
                            :label="$t('pointCode.unit')">
                    </el-table-column>
                    <el-table-column
                            :label="$t('pointCode.operate')"
                    >
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit" @click="openEdit(scope.row)">{{$t('edit') }}</el-button>
                            <el-button type="text" icon="el-icon-delete" style="color: #c60023;" @click="deletePointCode(scope.row)">{{$t('delete')}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total">
                    </el-pagination>
                </div>

            </div>
        </div>
        <el-dialog
                title="Point Code"
                :visible.sync="dialogVisible"
                width="100%"
        >
            <el-form ref="form" :model="point" label-width="100px">
                <el-form-item label="Category">
                    <el-input v-model="point.serviceCategory" placeholder="Category"></el-input>
                </el-form-item>
                <el-form-item label="Unit">
                    <el-input v-model="point.serviceUnit" placeholder="unit"></el-input>
                </el-form-item>
                <el-form-item label="Point Code">
                    <el-input v-model="point.pointCode" placeholder="point code"></el-input>
                </el-form-item>
                <el-form-item label="Hours">
                    <el-input v-model="point.hours" placeholder="Hours"></el-input>
                </el-form-item>
                <el-form-item label="Description">
                    <el-input v-model="point.serviceItem" placeholder="Description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="submitForm">Confirm</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb';
    import {modPoint, getPcList, addPoint, deletePointCode} from "../../api/service";
    import mixins from '../../util/mixins';
    import {ERROR_OK} from "../../util/config";
    import {arrayUnique} from "../../util";

    export default {
        name: "point-code",
        mixins: [mixins],
        data() {
            return {
                dialogVisible: false,
                pointList: [],
                serviceCategoryFilters: [],
                serviceItemFilters: [],
                serviceUnitFilters: [],
                key: '',
                key1: '',
                point: {
                    id: '',
                    serviceUnit: '',
                    serviceCategory: '',
                    pointCode: '',
                    serviceItem: '',
                    hours: ''
                }
            }
        },
        created() {
            this.getPointList()
        },
        methods: {
            close() {
                this.point = {
                    id: '',
                    serviceUnit: '',
                    serviceCategory: '',
                    pointCode: '',
                    serviceItem: '',
                    hours: ''
                }
            },
            async submitForm() {
                const {
                    id,
                    pointCode,
                    hours,
                    serviceUnit,
                    serviceCategory,
                    serviceItem,
                } = this.point;
                if (id) {
                    const {status, msg} = await modPoint({id, pointCode, hours});
                    if (status === ERROR_OK) {
                        this.close();
                        this.dialogVisible = false;
                        this.$message.success('Modify successfully');
                        this.getPointList()
                    } else {
                        this.$message.error(msg)
                    }
                } else {
                    const {status, msg} = await addPoint({pointCode, hours, serviceUnit, serviceCategory, serviceItem});
                    if (status === ERROR_OK) {
                        this.close();
                        this.dialogVisible = false;
                        this.$message.success('Add successfully');
                        this.getPointList()
                    } else {
                        this.$message.error(msg)
                    }
                }
            },
            async deletePointCode(row){
                this.$confirm('Do you want to delete?','Warning').then(async ()=>{
                    const {status,msg} = await deletePointCode(row.id);
                    if(status === ERROR_OK) {
                        this.$message.success('Success!');
                        this.getPointList();
                    }else {
                        this.$message.error(msg)
                    }
                }).catch(()=>{})
            },
            openEdit(point) {
                this.point = point;
                this.dialogVisible = true
            },
            handleFilter(value, row, column) {
                this.pageNum = 1;
                const property = column['property'];
                return row[property] === value;
            },
            async getPointList() {
                const {status, data} = await getPcList();
                if (status === ERROR_OK) {
                    this.pointList = data;
                    ['serviceCategory', 'serviceItem', 'serviceUnit'].forEach(item => {
                        this[item + 'Filters'] = arrayUnique(data.map(p => {
                            return p[item]
                        })).map(i => ({text: i, value: i}))
                    });
                    this.total = data.length
                }
            }
        },
        watch: {
            key() {
                const list = this.pointList.filter(item => {
                    return item.serviceItem.toLowerCase().includes(this.key.toLowerCase())
                }).filter(item => item.pointCode.toLowerCase().includes(this.key1.toLowerCase()));
                this.total = list.length;
                this.pageNum = 1;
            },
            key1() {
                const list = this.pointList.filter(item => {
                    return item.serviceItem.toLowerCase().includes(this.key.toLowerCase())
                }).filter(item => item.pointCode.toLowerCase().includes(this.key1.toLowerCase()));
                this.total = list.length;
                this.pageNum = 1;
            }
        },
        components: {
            Crumb
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .content {
        @include content
    }
</style>